{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{% block title %}家乡主页{% endblock title %}</title>
    <meta name="description" content="{% block description %}description{% endblock description %}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}">
</head>

<body>
<div class="container-fluid">
    <div class="row sticky-top">
        <div class="col" style="padding: 0">
            <nav class="navbar navbar-expand-lg navbar-dark bg-success">
                <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
                aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button> -->
                <div class="collapse navbar-collapse">
                    <a class="navbar-brand" href="{% url 'home:index' %}"><img src="{% static 'images/logo.png' %}"
                                                                               alt=""
                                                                               style="max-width: 15%;height:auto;"></a>
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home:home_history' %}">家乡历史</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home:home_star' %}">家乡名人</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home:home_beauty' %}">家乡美景</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home:home_building' %}">家乡建筑</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home:home_custom' %}">家乡风俗</a>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
                    </form>
                    {% if request.session.is_login %}
                        <div class="btn-group" role="group" aria-label="logged-in">
                            <button type="button" class="btn btn-outline-light my-2 mx-2 my-sm-0" data-toggle="tooltip"
                                    data-placement="bottom" title="欢迎, {{ request.session.user_id }}"
                                    onclick="window.location.href='{% url 'home:user_central' %}'"><i
                                    class="fa fa-user-circle fa-lg" aria-hidden="true"></i></button>
                            <button class="btn btn-outline-light my-2 mx-2 my-sm-0" data-toggle="modal"
                                    data-target="#logout">
                                <i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
                            </button>
                        </div>
                    {% else %}
                        <button class="btn btn-outline-light my-2 mx-2 my-sm-0" data-toggle="modal"
                                data-target="#login">
                            <i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
                        </button>
                    {% endif %}
                </div>
            </nav>
        </div>
    </div>
    {% if login_form.captcha.errors %}
        <h5 class="page-header" style="margin-top: 20px"></h5>
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>{{ login_form.captcha.errors }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% elif message %}
        <h5 class="page-header" style="margin-top: 20px"></h5>
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>{{ message }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endif %}
    <!-- 登出 -->
    <div class="modal fade" id="logout" tabindex="-100" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logoutLabel">退出登录</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    您确认要退出当前账号吗?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">我再想想</button>
                    <button type="button" class="btn btn-success"
                            onclick="window.location.href='{% url 'home:logout' %}'">
                        退出登录
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录 -->
    <div class="modal fade " id="login" tabindex="-100" role="dialog" aria-labelledby="loginLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-center" id="loginLabel">登录
                                <button type="button" class="close float-right"
                                        data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </h5>
                        </div>
                    </div>
                    <hr class="my-4">
                    <div class="row">
                        <div class="col">
                            <form action="/home/" class="form-login" method="post">
                                {% csrf_token %}
                                <div class="form-group">
                                    {#                                    <input type="text" name="username" class="form-control" id="id_username"#}
                                    {#                                           placeholder="请输入您的用户名" autofocus required>#}
                                    {{ login_form.username }}
                                    <small class="form-text text-muted">
                                        用户名长度必须为2-18位,不能出现空格\特殊字符\表情
                                    </small>
                                </div>
                                <div class="form-group">
                                    {#                                    <input type="password" name="password" class="form-control" id="id_password"#}
                                    {#                                           placeholder="请输入您的密码" required>#}
                                    {{ login_form.password }}
                                    <small id="passwordHelpBlock" class="form-text text-muted">
                                        密码长度必须为6-18位, 包括大小写和数字, 不能出现空格\特殊字符\表情
                                    </small>
                                </div>
                                <div class="form-group">
                                    {{ login_form.captcha.label_tag }}
                                    {{ login_form.captcha }}
                                    <small class="form-text text-muted">
                                        为防止机器人入侵，请完成上方验证
                                    </small>
                                </div>
                                <button type="submit" class="btn btn-success btn-block">登录</button>
                                <h5 class="page-header" style="margin-top: 20px"></h5>
                                <button type="button" class="btn btn-primary btn-block"
                                        onclick="window.location.href='{% url 'home:register' %}'">注册
                                </button>
                            </form>
                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加新闻 -->
    <div class="modal fade" id="new_editor" tabindex="-100" role="dialog" aria-labelledby="new_editorLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-center" id="new_editorLabel">添加新新闻
                                <button type="button" class="close float-right"
                                        data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </h5>
                        </div>
                    </div>
                    <hr class="my-4">
                    <div class="row">
                        <div class="col">
                            <form action="/home/" method="POST">
                                {% csrf_token %}
                                <div class="form-group">
                                    {{ news_form.news_title.label_tag }}
                                    {{ news_form.news_title }}
                                    <small class="form-text text-muted">
                                        标题字数限制在2~20
                                    </small>
                                </div>
                                <div class="form-group">
                                    {{ news_form.news_content.label_tag }}
                                    {{ news_form.news_content }}
                                    <small class="form-text text-muted">
                                        内容字数限制在6~2048
                                    </small>
                                </div>
                                <button type="submit" class="btn btn-success btn-block btn-lg">提交</button>
                            </form>
                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                </div>
            </div>
        </div>
    </div>
    <!-- 添加Tip -->
    <div class="modal fade" id="tip_editor" tabindex="-100" role="dialog" aria-labelledby="tip_editorLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-center" id="tip_editorLabel">添加新新闻
                                <button type="button" class="close float-right"
                                        data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </h5>
                        </div>
                    </div>
                    <hr class="my-4">
                    <div class="row">
                        <div class="col">
                            <form action="/home/" method="POST">
                                {% csrf_token %}
                                <div class="form-group">
                                    {{ tip_form.tip_content.label_tag }}
                                    {{ tip_form.tip_content }}
                                    <small class="form-text text-muted">
                                        内容字数限制在6~50
                                    </small>
                                </div>
                                <button type="submit" class="btn btn-success btn-block btn-lg">提交</button>
                            </form>
                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                </div>
            </div>
        </div>
    </div>
    <!-- 非管理员 -->
    <div class="modal fade" id="not_admin_modal" tabindex="-100" role="dialog" aria-labelledby="not_admin_modalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logoutLabel">权限不足</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    需要管理员账号
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-block" data-dismiss="modal">我知道了</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面贡献者 -->
    <div class="modal fade" id="editor_modal" tabindex="-100" role="dialog" aria-labelledby="editor_modalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-center" id="editor_modalLabel">
                                页面贡献者名单
                                <button type="button" class="close float-right"
                                        data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </h5>
                        </div>
                    </div>
                    <hr class="my-4">
                    <p class="lead text-center"><strong>感谢你们的付出!</strong></p>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                    <div class="row">
                        <div class="col">
                            <ul>
                                {% if editor_list %}
                                    {% for foo in editor_list %}
                                        <li><p class="lead">{{ foo.user_id }}</p></li>
                                    {% endfor %}
                                {% else %}
                                    <li><p class="lead">暂无</p></li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                </div>
            </div>
        </div>
    </div>
    <h5 class="page-header" style="margin-top: 20px"></h5>
    <div class="row">
        <div class="col-10">
            <div class="row">
                <div class="col">
                    <!--显示大屏幕-->
                    <div class="jumbotron">
                        <h1 class="display-2">首页</h1>
                        <hr class="my-4">
                        <div class="row">
                            <div class="col">
                                <!--big logo-->
                                <img src="{% static 'images/logo.png' %}" alt="" style="max-width: 70%;height:auto;">
                            </div>
                            <div class="col">
                                <!--统计信息-->
                                <div class="container text-center">
                                    <p class="lead">人人可编辑的家乡百科,
                                        欢迎您光临本站!<br>目前,已有<strong>{{ content_num }}</strong>
                                        条关于家乡的条目<br>有<strong>{{ count_item.discuss_num }}</strong>条讨论<br>有
                                        <strong>{{ count_item.editor_num }}</strong>位编辑者<br>有
                                        <strong>{{ count_item.item_num }}</strong>次编辑
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <!--新闻-->
                    <div class="card text-black-50 mb-3 border-success">
                        <div class="card-header bg-success font-weight-bold">
                            最新新闻
                            {% if request.session.user_id == 'admin' %}
                                <button type="button" class="btn btn-outline-light float-right" data-toggle="modal"
                                        data-target="#new_editor"><i class="fa fa-plus" aria-hidden="true"></i>
                                </button>
                            {% else %}
                                <button type="button" class="btn btn-outline-light float-right" data-toggle="modal"
                                        data-target="#not_admin_modal"><i class="fa fa-plus" aria-hidden="true"></i>
                                </button>
                            {% endif %}
                        </div>
                        <div class="card-body">
                            {% if new_list %}
                                {% for new in new_list %}
                                    <h5 class="card-title">{{ new.new_title }}</h5>
                                    <p class="card-text">{{ new.new_content }}</p>
                                    <hr class="my-4">
                                {% endfor %}
                            {% else %}
                                <h5 class="card-title">暂无新闻</h5>
                                <p class="card-text">暂无新闻</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="col-8">
                    <!--内容-->
                    <div class="row">
                        <div class="col">
                            <!--关于本站-->
                            <div class="card text-black-50 mb-3 border-success">
                                <div class="card-header bg-success font-weight-bold">关于本站</div>
                                <div class="card-body">
                                    <p class="card-text">本网站旨在为广大网友提供优质的家乡资料并推广自己的家乡。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <!--轮播图-->
                            <div class="bg-carousel">
                                <div id="carouselCaptions" class="carousel slide" data-ride="carousel">
                                    <ol class="carousel-indicators">
                                        <li data-target="#carouselCaptions" data-slide-to="0" class="active">
                                        </li>
                                        <li data-target="#carouselCaptions" data-slide-to="1"></li>
                                        <li data-target="#carouselCaptions" data-slide-to="2"></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <div class="carousel-item active">
                                            <img src="{% static 'images/bg-1.jpg' %}" class="d-block w-100" alt="...">
                                            <div class="carousel-caption d-none d-md-block">
                                                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{% static 'images/bg-2.jpg' %}" class="d-block w-100" alt="...">
                                            <div class="carousel-caption d-none d-md-block">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{% static 'images/bg-3.jpg' %}" class="d-block w-100" alt="...">
                                            <div class="carousel-caption d-none d-md-block">
                                                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="carousel-control-prev" href="#carouselCaptions" role="button"
                                       data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#carouselCaptions" role="button"
                                       data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                    <div class="row">
                        <div class="col">
                            <!--问题:你知道吗?-->
                            <div class="card text-black-50 mb-3 border-success">
                                <div class="card-header bg-success font-weight-bold">
                                    你知道吗?
                                    {% if request.session.user_id == 'admin' %}
                                        <button type="button" class="btn btn-outline-light float-right"
                                                data-toggle="modal"
                                                data-target="#tip_editor"><i class="fa fa-plus" aria-hidden="true"></i>
                                        </button>
                                    {% endif %}
                                </div>
                                <div class="card-body">
                                    <ul class="card-text">
                                        {% if tip_list %}
                                            {% for tip in tip_list %}
                                                <li>{{ tip.tip_content }}</li>
                                            {% endfor %}
                                        {% else %}
                                            <li>暂无tip</li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <!--协助网站-->
                            <div class="card text-black-50 mb-3 border-success">
                                <div class="card-header bg-success font-weight-bold">协助完善本站</div>
                                <div class="card-body">
                                    <p class="card-text">
                                        人人都可以参与编写，如果您想参与编写词条，请您先注册本站账号并仔细阅读编辑指南，在练习好你的编写能力后就可以参与到目前的工作中了。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-2">
            <div class="cow">
                <div class="col">
                    <!--贡献者-->
                    <div class="card mb-3">
                        <div class="card-header bg-transparent">贡献者</div>
                        <div class="card-body">
                            <ul class="card-text">
                                {% if editor_list %}
                                    {% for item in editor_list %}
                                        <li>{{ item.user_id }}</li>
                                    {% endfor %}
                                {% else %}
                                    <li>暂无</li>
                                {% endif %}
                            </ul>
                        </div>
                        <div class="card-footer bg-transparent text-right"><a href="#"
                                                                              class="btn btn-success"
                                                                              data-toggle="modal"
                                                                              data-target="#editor_modal">查看更多</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cow">
                <div class="col">
                    <!--最近编辑 and 最近讨论-->
                    <div class="card">
                        <div class="card-body" style="padding: 10px">
                            <nav>
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <a class="nav-item nav-link active" id="nav-add-tab" data-toggle="tab"
                                       href="#nav-add" role="tab"
                                       aria-controls="nav-add" aria-selected="true" style="font-size: 0.8rem">最近编辑</a>
                                    <a class="nav-item nav-link" id="nav-discuss-tab" data-toggle="tab"
                                       href="#nav-discuss" role="tab"
                                       aria-controls="nav-discuss" aria-selected="false"
                                       style="font-size: 0.8rem">最近讨论</a>
                                </div>
                            </nav>
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade show active" id="nav-add" role="tabpanel"
                                     aria-labelledby="nav-add-tab">
                                    <ul>
                                        {% if latest_history %}
                                            {% for item in latest_history %}
                                                <li>{{ item.action_type }}: {{ item.action_target }}</li>
                                            {% endfor %}
                                        {% else %}
                                            <li>暂无新内容</li>
                                        {% endif %}
                                    </ul>
                                </div>
                                <div class="tab-pane fade" id="nav-discuss" role="tabpanel"
                                     aria-labelledby="nav-discuss-tab">
                                    <ul>
                                        {% if discuss_list %}
                                            {% for item in discuss_list %}
                                                <li>{{ item.discuss_content }}</li>
                                            {% endfor %}
                                        {% else %}
                                            <li>暂无新讨论</li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="https://kit.fontawesome.com/9900f8e783.js" crossorigin="anonymous"></script>
    <script src="" async defer></script>
</body>

</html>